<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>全选按钮</title>
    <style>
        table,td,th{
            border: 1px solid black;
            border-collapse: collapse;
            text-align: center;
        }
        th{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th><input type="checkbox" id="checkAll">全选</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="ck"></td>
            <td>zhangsan</td>
            <td>22</td>
            <td>男</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="ck"></td>
            <td>lisi</td>
            <td>22</td>
            <td>女</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="ck"></td>
            <td>wagnwu</td>
            <td>22</td>
            <td>男</td>
        </tr>
    </table>
    <script>
        const checkAll = document.querySelector('#checkAll')
        const cks = document.querySelectorAll('.ck')
        checkAll.addEventListener('click',function(e){
                for(let i=0;i<cks.length;i++){
                    cks[i].checked=this.checked
                }
        })
        for(let i=0;i<cks.length;i++){
            cks[i].addEventListener('click',function(){
                checkAll.checked=document.querySelectorAll('.ck:checked').length===cks.length
            })
        }
    </script>
</body>
</html>